<template>
  <div id="app">
    <!-- <div class="biglist">
      <span class="btn" @click="largeScreen('#bigscreen')">大屏展示</span>
    </div> -->
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/BigScreen.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      isshow: false,
    };
  },
  mounted() {
    // 退出是反应
    window.onresize = () => {
      // let isFull = false;
      // isFull = document.fullscreenEnabled||window.fullScreen||document.webkitRequestFullScreen||document.msFullscreenEnabled;
      let isFull = document.fullscreen;
      if (!isFull) {
        // console.log("退出全屏");
        this.isshow = false;
      }
    };
  },
  methods: {
    // 大屏
    largeScreen(element) {
      // console.log('进入全屏');
      var de = document.querySelector(element) || document.documentElement;
      if (de.requestFullscreen) {
        de.requestFullscreen();
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
      }
      this.isshow = true;
      console.log(1);
    },
  },
};
</script>

<style lang="less">
#app > div {
  position: relative;
  min-height: 100vh;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 0.16rem;
}
.biglist {
  margin: 20px;
}
.btn {
  cursor: pointer;
  position: relative;
  padding: 10px 20px;
  background: white;
  font-size: 28px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  transition: all 1s;
  &:after,
  &:before {
    content: " ";
    width: 10px;
    height: 10px;
    position: absolute;
    border: 0px solid #fff;
    transition: all 1s;
  }
  &:after {
    top: -1px;
    left: -1px;
    border-top: 5px solid black;
    border-left: 5px solid black;
  }
  &:before {
    bottom: -1px;
    right: -1px;
    border-bottom: 5px solid black;
    border-right: 5px solid black;
  }
  &:hover {
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    // background:rgba(0,0,0,.5);
    // color:white;
    &:before,
    &:after {
      width: 100%;
      height: 100%;
      // border-color:white;
    }
  }
}

.data-container {
  background: #ffebee;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
